<template>
    <div class="container">
        <template v-if="!showType">
            <ul class="ls" v-if="todoData.length > 0">
                <li v-for="item in todoData" :key="item.entityId">
                    <div class="ws-backlog-block">
                        <div class="ws-backlog-block-head">
                            <img
                                class="ws-tubiao"
                                src="@/assets/btn/yujing.png"
                            />
                            <span class="ws-title" :title="item.orgName">{{
                                item.orgName
                            }}</span
                            ><span class="ws-more">{{
                                item.state === 'Todo' ? '审核中' : '未读'
                            }}</span>
                        </div>
                        <a
                            href="####"
                            class="ws-backlog-block-orgName"
                            :title="item.taskDescription"
                            >{{ item.taskDescription }}</a
                        >
                        <div class="ws-backlog-block-content">
                            这是待办内容这是待办内容这是待办内容这是待办内容这是待办内
                            这是待办内容这,最多显示2排,超过...代替,行距1.5倍这是待办内容这是待办内容这是待办内容这是待办内容这是待办内
                            这是待办内容这,最多显示2排,超过...代替,行距1.5倍
                        </div>
                        <div class="ws-backlog-block-bottom">
                            <span style="margin-left: 5px">
                                {{ '2021-09-25' }}
                            </span>
                            <!-- <div
                                    class="ws-project-number"
                                    :title="item.billName"
                                >
                                    <i class="el-icon-share"></i
                                    >{{ item.billName }}
                                </div>
                                <div class="ws-time">
                                    <i class="el-icon-time"></i
                                    >{{ item.notifyTimeStr }}
                                </div> -->
                            <div class="ws-right">
                                <a class="l-button" @click="openDetail(item)"
                                    >详情</a
                                >
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="no_date" v-else>暂无信息</div>
        </template>

        <template v-else>
            <div class="e-table">
                <el-table
                    border
                    ref="table"
                    :data="todoUpcomingData"
                    style="width: 100%"
                    class="table"
                    :height="tableHeight"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column
                        label="预警内容"
                        min-width="100"
                        fixed
                        show-overflow-tooltip
                    >
                        <template slot-scope="scope">
                            <span
                                @click="details(scope.row)"
                                style="color: blue; cursor: pointer"
                            >
                                {{ scope.row.billNo }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="orgName"
                        label="预警标题"
                        fixed
                        min-width="100"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column prop="acceptanceDate" label="未读/已读">
                        <template slot-scope="scope">
                            <span style="color: #ff0000; cursor: pointer">
                                {{ scope.row.billNo }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="supplierName"
                        label="通知时间"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column label="机构" min-width="100">
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <ComPagination
                :total="total"
                :pageSize.sync="query.limit"
                :currentPage.sync="query.page"
                @currentChange="getTodo"
                @sizeChange="getTodo"
                class="bottomSetting"
            />
        </template>
    </div>
</template>
<script>
// import Audit from '../../common/Audit'
import { showLoading, hideLoading, openAppClient } from '@/utils/common'
// import { mapState } from 'vuex'
import { vueDom, debounce } from '@/utils/common.js'
import ComPagination from '@/components/pagination/pagination.vue'
import publics from '@/api/settlementManagement/equipmentBilling/public'

export default {
    name: 'TodoList',
    components: {
        // Audit
        ComPagination
    },
    computed: {},
    data () {
        return {
            loading: false,
            searchKey: '',
            tabActive: '0',
            curRow: null,
            todoData: [
                {
                    orgName: '四川路桥',
                    taskDescription:
                        '四川宜宾公路铁路海外分公司四川宜宾公路铁路海外分公司四川宜宾公路铁路海外分公司四川宜宾公路铁路海外分公司四川宜宾公路铁路海外分公司四川宜宾公路铁路海外分公司四川宜宾公路铁路海外分公司',
                    billName: '庐江大桥',
                    notifyTimeStr: '预警'
                },
                {
                    orgName: '四川路桥',
                    taskDescription: '四川公路铁路海外公司',
                    billName: '庐江大桥',
                    notifyTimeStr: '预警'
                },
                {
                    orgName: '四川路桥',
                    taskDescription: '四川公路铁路海外公司',
                    billName: '庐江大桥',
                    notifyTimeStr: '预警'
                },
                {
                    orgName: '四川路桥',
                    taskDescription: '四川公路铁路海外公司',
                    billName: '庐江大桥',
                    notifyTimeStr: '预警'
                },
                {
                    orgName: '四川路桥',
                    taskDescription: '四川公路铁路海外公司',
                    billName: '庐江大桥',
                    notifyTimeStr: '预警'
                }
            ],
            todoDataBack: [], // 待办列表备份，供搜索
            todoSelect: [], // 待办选择列表
            auditType: '', // 审核状态：待办单项todoSingle 待办批量todoAll
            doneData: [],
            pageIndex: 1,
            pageSize: 10,
            doneNum: 500, // 已办条数
            undoSelect: [], // 已办选择列表
            isAuditVisible: false,
            userInfoLocal: null,
            radio: 1,
            str1: 1,
            a1: '',
            model: '切换到列表模式',
            todoUpcomingData: [], // 待办-待办
            todoDoneData: [], // 待办-已办
            tableHeight: 0,
            total: 0,
            query: {
                limit: 10,
                page: 1
            },
            auditParams: {
                billId: '',
                billType: '',
                freeNextUnitIndex: null,
                freeNextUser: '',
                isPass: true,
                isShareInAudit: true,
                opinion: '',
                orgId: '',
                orgName: '',
                userId: '',
                workId: ''
            }
        }
    },
    props: {
        showType: {
            type: Boolean
        },
        isDone: {
            type: Number
        }
    },
    created () {
        // this.getTodo()
        // this.getDone()
    },
    mounted () {
        // table动态高度
        // console.log(window.getComputedStyle($('table')['1']).height)
        vueDom(
            () => {
                this.tableHeight = document.body.clientHeight - 170
            },
            () => {
                return $('table').length !== 0
            }
        )
        this.fn = () => {
            this.tableHeight = document.body.clientHeight - 170
        }
        window.onresize = debounce(this.fn)
    },
    methods: {
        // 待办
        getTodo () {},
        // 已办
        getDone () {},
        toggle () {
            this.showType = !this.showType
            console.log(this.showType)
            this.showType
                ? (this.model = '切换到标准模式')
                : (this.model = '切换到列表模式')
        },
        onChangeTab () {},
        onPageChange () {},
        openDetail () {},
        handleSearch () {},
        // onShowAudit(row) {
        //     console.log('audit')
        //     this.curRow = row
        //     this.isAuditVisible = true
        //     this.auditType = 'todoSingle'
        // },
        audit () {},
        // 点击审核
        onShowAudit () {
            showLoading()
            this.setAuditParams(this.auditParams)
            // 客户端弹窗弹出本地页面
            openAppClient('/exaDialog', '填写审核意见', () => {
                const auditParams = JSON.parse(localStorage.vuex).auditParams
                showLoading()
                publics
                    .audit(auditParams)
                    .then(() => {
                        this.clientPop('suc', '审核成功', this.handleClose)
                    })
                    .finally(() => {
                        hideLoading()
                    })
            })
        },
        handleSelectionChange () {},
        onAllAudit () {},
        // 选择已办
        handleSelectionChangeUndo () {}
    }
}
</script>
<style lang="scss" scoped>
.ws-backlog-block {
    border: 1px solid #eee;
    background: #fff;
    margin: 20px 10px 0px 10px;
    border-radius: 7px;
    box-shadow: 1.4px 1.4px 11.6px 1.4px rgba(4, 0, 0, 0.1);
    .ws-backlog-block-head {
        display: flex;
        align-items: center;
        height: 39px;
        border-bottom: 1px solid #f2f2f2;
        position: relative;
    }
    .ws-tubiao {
        width: 20px;
        height: 19px;
        padding-left: 10px;
        margin-right: 7px;
    }
    .ws-title {
        display: block;
        width: calc(100% - 80px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        float: left;
        line-height: 39px;
    }
    .ws-more {
        display: inline-block;
        height: 20px;
        line-height: 20px;
        padding: 0 6px;
        // background: #f57c00;
        color: #ff0000;
        font-size: 12px;
        border-radius: 3px;
        position: absolute;
        right: 10px;
        top: 10px;
    }
    .ws-backlog-block-orgName {
        height: 60px;
        line-height: 30px;
        overflow: hidden;
        padding: 5px 15px;
        font-size: 12px;
        word-break: break-all;
        word-wrap: break-word;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #3264d8;
        text-decoration: none;
    }
    .ws-backlog-block-content {
        height: 60px;
        line-height: 30px;
        overflow: hidden;
        padding: 5px 15px;
        font-size: 12px;
        word-break: break-all;
        word-wrap: break-word;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #333;
    }

    .ws-backlog-block-bottom {
        // border-top: 1px solid #eee;
        height: 40px;
        line-height: 40px;
        .ws-project-number,
        .ws-time {
            display: inline-block;
            height: 40px;
            line-height: 40px;
            padding: 0px 20px 0 10px;
            color: #a9b7b7;
            word-break: keep-all;
            white-space: nowrap;
            max-width: 112px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .l-button {
            background: #fff;
            display: inline-block;
            overflow: hidden;
            cursor: pointer;
            position: relative;
            text-align: center;
            border: solid 1px #dddddd;
            color: #333333;
            padding: 0 15px;
            border-radius: 3px;
            user-select: none;
            margin: 10px 10px 0 0px;
            height: 20px;
            line-height: 20px;
        }
        .ws-blue {
            background: #2e61d7;
            border: 1px solid #2e61d7;
            color: #fff;
        }
    }
}

.container {
    position: relative;
}
.ls {
    display: flex;
    flex-wrap: wrap;
    li {
        margin: 0 0.15% 20px;
        width: 33%;
    }
}
.table {
    margin: 10px 0;
}
.e-table {
    min-height: 95vh;
}
</style>
